<template>
    <div class="dashboard-container">
      <!-- 顶部数据卡片 -->
      <el-row :gutter="20" class="data-cards">
        <el-col :span="6" v-for="card in dataCards" :key="card.title">
          <el-card shadow="hover">
            <div class="data-card">
              <div class="card-title">{{ card.title }}</div>
              <div class="card-value">{{ card.value }}</div>
              <div class="card-compare">
                较昨日
                <span :class="card.trend >= 0 ? 'up' : 'down'">
                  {{ Math.abs(card.trend) }}%
                  <el-icon><CaretTop v-if="card.trend >= 0" /><CaretBottom v-else /></el-icon>
                </span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
  
      <!-- 中部图表区域 -->
      <el-row :gutter="20" class="charts-area">
        <!-- 左侧：抓取任务统计 -->
        <el-col :span="12">
          <el-card title="数据抓取概况">
            <template #header>
              <div class="card-header">
                <span>数据抓取概况</span>
                <el-radio-group v-model="crawlTimeRange" size="small">
                  <el-radio-button label="today">今日</el-radio-button>
                  <el-radio-button label="week">本周</el-radio-button>
                  <el-radio-button label="month">本月</el-radio-button>
                </el-radio-group>
              </div>
            </template>
            <!-- 这里放抓取数据统计图表 -->
            <div class="chart-container" ref="crawlChart"></div>
          </el-card>
        </el-col>
  
        <!-- 右侧：内容发布统计 -->
        <el-col :span="12">
          <el-card title="内容发布概况">
            <template #header>
              <div class="card-header">
                <span>内容发布概况</span>
                <el-radio-group v-model="publishTimeRange" size="small">
                  <el-radio-button label="today">今日</el-radio-button>
                  <el-radio-button label="week">本周</el-radio-button>
                  <el-radio-button label="month">本月</el-radio-button>
                </el-radio-group>
              </div>
            </template>
            <!-- 这里放发布数据统计图表 -->
            <div class="chart-container" ref="publishChart"></div>
          </el-card>
        </el-col>
      </el-row>
  
      <!-- 底部列表区域 -->
      <el-row :gutter="20" class="list-area">
        <!-- 左侧：待处理任务 -->
        <el-col :span="12">
          <el-card>
            <template #header>
              <div class="card-header">
                <span>待处理任务</span>
                <el-button text>查看全部</el-button>
              </div>
            </template>
            <el-table :data="pendingTasks" style="width: 100%">
              <el-table-column label="任务类型" prop="type" width="100">
                <template #default="scope">
                  <el-tag :type="scope.row.type === 'crawl' ? 'primary' : 'success'">
                    {{ scope.row.type === 'crawl' ? '抓取' : '发布' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="任务内容" prop="content" />
              <el-table-column label="计划执行时间" prop="planTime" width="160" />
              <el-table-column label="状态" prop="status" width="100">
                <template #default="scope">
                  <el-tag :type="getStatusType(scope.row.status)">
                    {{ scope.row.status }}
                  </el-tag>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
  
        <!-- 右侧：系统状态 -->
        <el-col :span="12">
          <el-card>
            <template #header>
              <div class="card-header">
                <span>系统状态</span>
                <el-button text>详细信息</el-button>
              </div>
            </template>
            <div class="system-status">
              <div v-for="item in systemStatus" :key="item.name" class="status-item">
                <div class="status-name">{{ item.name }}</div>
                <el-progress 
                  :percentage="item.value" 
                  :status="item.value > 80 ? 'exception' : 'normal'"
                />
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
  
      <!-- 告警信息悬浮窗 -->
      <el-card class="alert-card" v-if="alerts.length">
        <template #header>
          <div class="card-header">
            <span>系统告警</span>
            <el-button text @click="clearAlerts">清除</el-button>
          </div>
        </template>
        <div v-for="alert in alerts" :key="alert.id" class="alert-item">
          <el-alert
            :title="alert.title"
            :type="alert.type"
            :description="alert.description"
            show-icon
          />
        </div>
      </el-card>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue'
  import { CaretTop, CaretBottom } from '@element-plus/icons-vue'
  // 假设使用 ECharts
  import * as echarts from 'echarts'
  
  // 顶部数据卡片
  const dataCards = ref([
    { title: '今日抓取数据量', value: '12,456', trend: 5.2 },
    { title: '待发布内容', value: '32', trend: -2.1 },
    { title: '活跃账号数', value: '186', trend: 0.5 },
    { title: '系统健康度', value: '98%', trend: 0 }
  ])
  
  // 时间范围选择
  const crawlTimeRange = ref('today')
  const publishTimeRange = ref('today')
  
  // 待处理任务
  const pendingTasks = ref([
    {
      type: 'crawl',
      content: '抖音达人数据抓取',
      planTime: '2024-03-20 15:00',
      status: '待执行'
    },
    // ... 更多任务
  ])
  
  // 系统状态
  const systemStatus = ref([
    { name: 'CPU使用率', value: 45 },
    { name: '内存使用率', value: 62 },
    { name: '存储空间', value: 78 },
    { name: '带宽使用率', value: 35 }
  ])
  
  // 告警信息
  const alerts = ref([
    {
      id: 1,
      type: 'warning',
      title: '账号异常提醒',
      description: '3个抖音账号登录状态异常，请及时处理'
    }
  ])
  
  // 状态标签类型
  const getStatusType = (status) => {
    const types = {
      '待执行': 'info',
      '执行中': 'primary',
      '已完成': 'success',
      '异常': 'danger'
    }
    return types[status] || 'info'
  }
  
  const clearAlerts = () => {
    alerts.value = []
  }
  
  // 图表初始化
  onMounted(() => {
    // 初始化抓取数据图表
    const crawlChart = echarts.init(document.querySelector('.chart-container'))
    // 设置图表配置和数据
    // ...
  
    // 初始化发布数据图表
    const publishChart = echarts.init(document.querySelector('.chart-container'))
    // 设置图表配置和数据
    // ...
  })
  </script>
  
  <style lang="scss" scoped>
  .dashboard-container {
    padding: 20px;
  
    .data-cards {
      margin-bottom: 20px;
      
      .data-card {
        .card-title {
          color: #666;
          font-size: 14px;
        }
        
        .card-value {
          font-size: 24px;
          font-weight: bold;
          margin: 10px 0;
        }
  
        .card-compare {
          font-size: 12px;
          color: #999;
          
          .up { color: #67c23a; }
          .down { color: #f56c6c; }
        }
      }
    }
  
    .charts-area {
      margin-bottom: 20px;
      
      .chart-container {
        height: 300px;
      }
    }
  
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  
    .system-status {
      .status-item {
        margin-bottom: 15px;
        
        .status-name {
          margin-bottom: 5px;
        }
      }
    }
  
    .alert-card {
      position: fixed;
      bottom: 20px;
      right: 20px;
      width: 300px;
      
      .alert-item {
        margin-bottom: 10px;
      }
    }
  }
  </style>